<template>
  <el-row>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-menu"></i>菜单配置</span>
        <el-col>
          <el-form :model="menu" class="wechat" ref="menu" size="small">
            <div v-for="(item,index) in menu.configForm" :key="item.index">
              <el-form-item prop="name">
                <el-input placeholder="请输入菜单名称" v-model="item.name"></el-input>
              </el-form-item>
              <el-form-item label="类型：" prop="type" label-width="60px">
                <el-select v-model="item.type" @change="() => {
                    if (item.type === 'click') {item.url = ''}
                    if (item.type === 'view') {item.key = ''}
                  }">
                  <el-option value="click" label="点击"></el-option>
                  <el-option value="view" label="链接"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="key" v-if="item.type === 'click'">
                <el-input placeholder="请输入对应参数" v-model="item.key"></el-input>
              </el-form-item>
              <el-form-item prop="url" v-if="item.type === 'view'">
                <el-input placeholder="请输入对应参数" v-model="item.url"></el-input>
              </el-form-item>
              <el-button icon="el-icon-plus" type="primary" size="small" @click="addSubMenu(index)">添加子菜单</el-button>
              <el-button icon="el-icon-error" type="danger" size="small" @click="delOneMenu(index)">删除一级菜单</el-button>

              <div v-for="item_sub in item.sub_button" :key="item_sub.index" class="ml20">
                <el-form-item prop="name">
                  <el-input placeholder="请输入菜单名称" v-model="item_sub.name">
                  </el-input>
                </el-form-item>
                <el-form-item label="类型：" prop="type" label-width="60px">
                  <el-select v-model="item_sub.type" @change="() => {
                      if (item_sub.type === 'click') { item_sub.url = '' }
                      if (item_sub.type === 'view') { item_sub.key = '' }
                    }">
                    <el-option value="click" label="点击"></el-option>
                    <el-option value="view" label="链接"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item prop="key" v-if="item_sub.type === 'click'">
                  <el-input placeholder="请输入对应参数" v-model="item_sub.key"></el-input>
                </el-form-item>
                <el-form-item prop="url" v-if="item_sub.type === 'view'">
                  <el-input placeholder="请输入对应参数" v-model="item_sub.url"></el-input>
                </el-form-item>
                <el-button icon="el-icon-error" type="danger" size="small" @click="delSubMenu(index)">删除</el-button>
              </div>
            </div>
            <el-button type="success" icon="el-icon-plus" size="small" @click="addOneMenu">添加一级菜单</el-button>
          </el-form>
          <el-button type="primary" size="small" class="fr" @click="handleWechatMenuSub">确认配置</el-button>
        </el-col>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label"><i class="el-icon-info"></i>消息模版</span>
        <el-col :span="8">
          <el-form :model="Form" label-width="100px" size="small">
            <el-form-item label="公众号名称" prop="name" :rules="[{required: true, message: '必须填写哦~'}]">
              <el-input placeholder="微信公众号名称" v-model="Form.name"></el-input>
            </el-form-item>
            <el-form-item label="模版ID" prop="template_id" :rules="[{required: true, message: '必须填写哦~'}]">
              <el-input placeholder="请填写公众号后台模版ID" v-model="Form.template_id"></el-input>
            </el-form-item>
            <el-form-item label="微信TOKEN" prop="token" :rules="[{required: true, message: '必须填写哦~'}]">
              <el-input placeholder="微信TOKEN" v-model="Form.token"></el-input>
            </el-form-item>
            <el-form-item label="消息加密密钥" prop="encoding_aes_key" :rules="[{required: true, message: '必须填写哦~'}]">
              <el-input type="textarea" autosize :row="4" placeholder="消息加密密钥" v-model="Form.encoding_aes_key" style="font-size:12px"></el-input>
            </el-form-item>
            <el-form-item label="公众号二维码" prop="url" :rules="[{required: true, trigger: 'change', message: '必须上传哦~'}]">
              <el-upload :action="url" :file-list="files" :limit="1" list-type="picture" :on-success="handleUploadSuccess" :on-remove="handleRemove" :before-upload="beforeAvatarUpload">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
              </el-upload>
            </el-form-item>
          </el-form>
          <el-button type="primary" size="small" class="fr mt20" @click="handleWechatSubmit">确认配置</el-button>
        </el-col>
        <el-col :span="10" class="ml20">
          <h3>微信公众号后台模版消息格式：</h3>
          <p>标题收款通知</p>
          <span>您好，您有一笔订单收款成功</span><br/>
          <span>到账金额：￥10.00</span><br>
          <span>支付方式：微信支付</span><br>
          <span>支付时间：2017-12-12 00:00:00</span><br>
          <span>订单编号：123456789</span><br>
          <span>详情请前往门店账户余额查看</span>
        </el-col>
      </el-tab-pane>
    </el-tabs>
  </el-row>
</template>

<script>
  import Breadcrumb from '@/components/Breadcrumb'
  import { wechatConfigSub, wechatConfigGet, wechatMenuSubmit } from '@/api/setting'
  import { mapGetters } from 'vuex'
  export default {
    name: 'wechat',
    components: {
      Breadcrumb
    },
    data() {
      return {
        Form: {
          name: '',
          token: '',
          encoding_aes_key: '',
          link: '',
          template_id: ''
        },
        files: [],
        menu: {
          configForm: []
        },
        rules: {
          name: [{ required: true, trigger: 'bulr', message: '必须填写哦~' }],
          type: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
          key: [{ required: true, trigger: 'bulr', message: '必须填写哦~' }]
        },
        url: process.env.BASE_API + '/merchant/uploadCommer'
      }
    },
    computed: {
      ...mapGetters([
        'id'
      ])
    },
    methods: {
      handleWechatSubmit() {
        wechatConfigSub(this.id, this.Form).then(response => {
          if (response.data.errorCode === 0) {
            this.$message.success(response.data.errorMsg)
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG/PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 1MB！')
        }
        return isJPG && isLt2M
      },
      handleUploadSuccess(res) {
        this.Form.link = res.result
      },
      handleRemove(file, fileList) {
        if (fileList.length === 0) {
          this.Form.link = ''
        }
      },
      addSubMenu(index) {
        if (this.menu.configForm[index].sub_button.length < 3) {
          this.menu.configForm[index].sub_button.push({ name: '', index: Date.now(), key: '', type: '', url: '' })
        } else {
          this.$message.error('子菜单最多只能添加3个哟~')
        }
      },
      delSubMenu(index) {
        this.menu.configForm[index].sub_button.splice(index, 1)
      },
      addOneMenu() {
        if (this.menu.configForm.length < 3) {
          this.menu.configForm.push({ name: '', index: Date.now(), key: '', type: '', url: '', sub_button: [] })
        } else {
          this.$message.error('最多只能添加3个哟~')
        }
      },
      delOneMenu(index) {
        this.menu.configForm.splice(index, 1)
      },
      handleWechatMenuSub() {
        this.$refs['menu'].validate((valid) => {
          if (valid) {
            wechatMenuSubmit(this.id, this.menu.configForm).then(response => {
              if (response.data.errorCode === 0) {
                this.$message.success(response.data.errorMsg)
              } else {
                this.$message.error(response.data.errorMsg)
              }
            })
          } else {
            this.$message.error('请认真填写参数！')
          }
        })
      }
    },
    mounted() {
      wechatConfigGet().then(response => {
        if (response.data.errorCode === 0) {
          this.Form.token = response.data.result.token
          this.Form.template_id = response.data.result.template_id
          this.menu.configForm = response.data.result.menus.button
          this.Form.encoding_aes_key = response.data.result.encoding_aes_key
          this.Form.name = response.data.result.wechat_name
          this.Form.link = response.data.result.wechat_qrcode
          if (this.Form.link !== '') {
            this.files.push({ name: '', url: response.data.result.wechat_qrcode })
          }
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  .wechat{
    .el-form-item{
      display: inline-block;
    }
    .ml20 {
      span{
        font-size: 12px;
      }
    }
  }
</style>
